<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的兑换</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <style>
    .title{
      text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  /*height: 60px;*/
    }
    *{
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }
    .top-container{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    .select-tap{
      width:20px;
      height:20px;
      border-radius:20px;
      border:1px solid #263B79
    }
    .checktype{
      padding: 10px 16px;
      background-color: #F7F4F2;
      margin: 8px;
    }
    .checktype span{
      vertical-align: middle;
    }
    .tapactive{
      background: #263B79;
      border:1px solid #ffffff;
    }
    .submit{
      width:90%;
      padding:10px;
      background-color:#33375E;
      color:#ffffff;
      border-radius:5px;
      margin:0 auto;
      text-align:center
    }
    </style>

</head>
<body style="background:#f7f4f2">
<div id="blank" class="header">
    <div id="back" v-back.tapmode class="back"></div>
    <span class="title">申诉</span>
</div>
<div id="app" class="top-container" v-cloak>
  <ul class="aui-list aui-media-list">
          <li class="aui-list-item" >
                  <div class="aui-media-list-item-inner">
                      <div class="aui-list-item-media">
                          <img :src="content.goods_pic">
                      </div>
                      <div class="aui-list-item-inner" >
                          <div class="aui-list-item-text">
                              <div class="aui-list-item-title title" >{{content.goods_name}}</div>
                          </div>
                          <div class="aui-info aui-margin-t-5" style="margin-top:10px">
                              <div class="aui-info-item">
                                  <span class="aui-margin-l-5" style="color:#FF5855">{{content.voucher}}商城券</span>
                                  </div>
                          </div>

                      </div>
                  </div>
              </li>
            </ul>
            <div style="padding:10px;background-color:#ffffff;margin-top:10px">
              <p>如果你的兑换券在使用过程中遇到以下情况，可以向我们进行申诉。我们会进行审核，并根据审核情况酌情返还你的兑换券。</p>
              <p>审核时间：工作日09:00-18:00</p>
              <p>审核周期：1-3个工作日</p>
            </div>
            <div style="background-color:#ffffff;padding:10px">
              <div class="checktype" v-myclick="[1, changestate]">
                <span class="select-tap" v-bind:class="{'tapactive':state==1}" ></span>
                <span>兑换券已被领完</span>
              </div>
              <div class="checktype" v-myclick="[2, changestate]">
                <span class="select-tap" v-bind:class="{'tapactive':state==2}"></span>
                <span>兑换券已过期</span>
              </div>
              <div class="checktype" v-myclick="[3, changestate]">
                <span class="select-tap" v-bind:class="{'tapactive':state==3}" ></span>
                <span>不小心点错了</span>
              </div>
              <div class="checktype" v-myclick="[4, changestate]">
                <span class="select-tap" v-bind:class="{'tapactive':state==4}"  style=""></span>
                <span>其他</span>
              </div>
              <div style="clear:both"></div>
            </div>
            <div class="submit" v-myclick="submit_appeal">提交</div>

</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>
    var list;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        var data = {
            member_id: getPrefs('member_id'),
            order_id: api.pageParam.order_id,
        };
        var callback = function (ret) {
            list = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.orderDetail, data, callback);
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        new Vue({
            el: '#app',
            data: {
                content:list,
                state:-1
            },
            methods:{
              submit_appeal:function(){
                if(this.state<1){
                  api.toast({
                      msg: '请选择申诉理由',
                      duration: 2000,
                      location: 'middle'
                  });

                return false;
                }
                var data = {
                    member_id: getPrefs('member_id'),
                    order_id: api.pageParam.order_id,
                };
                var callback = function (ret) {
                  api.toast({
                      msg: '提交申诉成功',
                      duration: 2000,
                      location: 'middle'
                  });
                  api.sendEvent({
                    name : 'exchangeupdate'
                  });

                  setTimeout(function(){
                    api.closeWin();
                  },2000)



                };
                pinet.post(URL.userApplication, data, callback);
              },
              changestate:function(state){
                this.state = state;
              }
            }
        })
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
